import { defineComponent, markRaw, watch } from 'vue'
import DataNode from '../../ItemNode/DataNode'
import Chart from './Chart.vue'
import * as echarts from 'echarts'

window.echarts = echarts

export default class NChart extends DataNode {
  isNChart = true
  isChartNode = true

  constructor(node?: NChart) {
    super(node)

    if (!node) {
      this.path = './components/NChart/NChart.tsx'
      this.name = '图表'

      const style = this.props.style
      this.props.style = {
        ...style,
        width: '300px',
        height: '200px',
        flexShrink: '0'
      }

      this.props.dataUrl = ''
      this.props.dataFn = `function () {
  return {}
}`

      this.props.autoAction = false

      this.props.option = {}
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          watch(
            () => this.props.data,
            () => (this.props.option = this.props.data ?? {})
          )

          return () => (
            <pComponent>
              <Chart option={this.props.option}></Chart>
            </pComponent>
          )
        },
        {
          name: 'NChart'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent(() => {
        return () => <pView style="color: var(--color-font-1)">通用图表</pView>
      })
    )
  }
}
